﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    @Styles.Render("~/Content/flatty/assets/stylesheets/css")
    @RenderSection("styles", false)
</head>
<body class="contrast-blue ">
    <header>
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="brand" href="index.html">
                        <i class="icon-heart-empty"></i>
                        <span class="hidden-phone">Flatty</span>
                    </a>
                    <a class="toggle-nav btn pull-left" href="#">
                        <i class="icon-reorder"></i>
                    </a>
                    <ul class="nav pull-right">

                        <li class="dropdown medium only-icon widget">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="icon-rss"></i>
                                <div class="label">5</div>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">
                                        <div class="widget-body">
                                            <div class="pull-left icon">
                                                <i class="icon-user text-success"></i>
                                            </div>
                                            <div class="pull-left text">
                                                John Doe signed up
                                                <small class="muted">just now</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="widget-body">
                                            <div class="pull-left icon">
                                                <i class="icon-inbox text-error"></i>
                                            </div>
                                            <div class="pull-left text">
                                                New Order #002
                                                <small class="muted">3 minutes ago</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="widget-body">
                                            <div class="pull-left icon">
                                                <i class="icon-comment text-warning"></i>
                                            </div>
                                            <div class="pull-left text">
                                                America Leannon commented Flatty with veeery long text.
                                                <small class="muted">1 hour ago</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="widget-body">
                                            <div class="pull-left icon">
                                                <i class="icon-user text-success"></i>
                                            </div>
                                            <div class="pull-left text">
                                                Jane Doe signed up
                                                <small class="muted">last week</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#">
                                        <div class="widget-body">
                                            <div class="pull-left icon">
                                                <i class="icon-inbox text-error"></i>
                                            </div>
                                            <div class="pull-left text">
                                                New Order #001
                                                <small class="muted">1 year ago</small>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="widget-footer">
                                    <a href="#">All notifications</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown dark user-menu">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                @*<img alt="Mila Kunis" height="23" src="assets/images/avatar.jpg" width="23" />*@
                                <span class="user-name hidden-phone">Mila Kunis</span>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="user_profile.html">
                                        <i class="icon-user"></i>
                                        Profile
                                    </a>
                                </li>
                                <li>
                                    <a href="user_profile.html">
                                        <i class="icon-cog"></i>
                                        Settings
                                    </a>
                                </li>
                                <li class="divider"></li>
                                <li>
                                    <a href="sign_in.html">
                                        <i class="icon-signout"></i>
                                        Sign out
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div id="wrapper">
        <div id="main-nav-bg"></div>
        <nav class="" id="main-nav">
            <div class="navigation">
                <div class="search">

                </div>
                <ul class="nav nav-stacked" v-cloak>
                    <li v-for="menu in menus" v-bind:class="{active:menuIsActive(menu)}">
                        <a v-bind:href="menu.link" v-bind:class="[{'dropdown-collapse':menu.children.length}, {in: menuIsActive(menu)}]">
                            <i v-if="menu.icon" v-bind:class="menu.icon"></i>
                            <span>{{menu.name}}</span>
                            <i v-if="menu.children.length" class="icon-angle-down angle-down"></i>
                        </a>
                        <ul v-if="menu.children && menu.children.length" v-bind:class="[{nav:true, 'nav-stacked':true, in:  menuIsActive(menu)}]">
                            <li v-for="child in menu.children" v-bind:class="{active:childIsActive(child)}">
                                <a v-bind:href="child.link">
                                    <i v-if="child.icon" v-bind:class="child.icon"></i>
                                    <i v-else class="icon-caret-right"></i>
                                    <span>{{child.name}}</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
        <section id="content">
            <div class="container-fluid">
                <div class="row-fluid" id="content-wrapper">
                    <div class="span12">

                        @RenderBody()
                    </div>
                </div>
            </div>
        </section>
    </div>
    @Scripts.Render("~/Content/flatty/assets/js")
    @RenderSection("scripts", false)
    <script>
        //router.start(main, '#main-html');
    </script>
</body>
</html>